<template>
  <div class="container-header-margin content">
    <a-row justify="center" class="custom-label">
      <a-col :xs="24" :sm="24" :md="20" :lg="16">
        <div class="title-container">
          <div class="title">团队信息填写</div>
          <a-button size="large" @click="addMember" type="dashed">邀请成员</a-button>
        </div>
        <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical" scrollToFirstError>
          <a-row :gutter="16">
            <a-col :xs="24" :sm="24" :md="12">
              <a-form-item ref="name" label="负责人" name="name" :labelCol="{ offset: 1 }">
                <a-input v-model:value="formState.name" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12">
              <a-form-item label="负责人所在学院：" name="college">
                <a-input v-model:value="formState.college" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item ref="sClass" label="班级" name="sClass" :labelCol="{ offset: 1 }">
                <class-selector v-model="formState.sClass" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12">
              <a-form-item label="手机号：" name="phone">
                <a-input v-model:value="formState.phone" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :xs="24" :sm="24" :md="12">
              <a-form-item label="第一指导教师" name="teacher1">
                <!-- <a-input v-model:value="formState.teacher1" /> -->
                <a-select v-model:value="formState.teacher1" placeholder="请选择指导教师" style="width: 100%" showSearch
                  @change="handleTeacherChange" @search="handleTeacherSearch" :filterOption="false">
                  <a-select-option v-for="teacher in teacherList" :key="teacher.id" :value="teacher.name">
                    {{ teacher.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12">
              <a-form-item label="第一指导教师所在学院" name="teacher1College">
                <college-selector v-model="formState.teacher1College" placeholder="请选择指导教师所在学院" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :xs="24" :sm="24" :md="12">
              <a-form-item label="第二指导教师" name="teacher2">
                <a-select v-model:value="formState.teacher2" placeholder="请选择指导教师" style="width: 100%" showSearch
                  @change="handleTeacherChange" @search="handleTeacherSearch" :filterOption="false">
                  <a-select-option v-for="teacher in teacherList" :key="teacher.id" :value="teacher.name">
                    {{ teacher.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12">
              <a-form-item label="第二指导教师所在学院" name="teacher2College">
                <college-selector v-model="formState.teacher2College" placeholder="请选择指导教师所在学院" />
              </a-form-item>
            </a-col>
          </a-row>


          <a-row :gutter="16">
            <a-col :xs="24" :sm="24" :md="12">
              <a-form-item label="项目名称" name="name" required>
                <a-input v-model:value="formState.name" placeholder="请输入项目名称" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12">
              <a-form-item label="项目类型" name="name" required>
                <a-input v-model:value="formState.name" placeholder="请输入项目类型" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="项目简介" name="description">
            <a-textarea v-model:value="formState.description" :rows="4" placeholder="请输入项目简介" :maxlength="500" showCount
              allow-clear />
          </a-form-item>


          <div class="upload-section">
            <div class="section-title">材料提交</div>
            <a-row :gutter="16">
              <a-col :xs="24" :sm="24" :md="8">
                <a-form-item label="项目申报书" name="declarationUrl">
                  <a-upload v-model:file-list="declarationFileList"
                    :customRequest="(options) => customRequest(options, 'declarationUrl')"
                    @change="(info) => handleFileChange(info, 'declarationUrl')" :maxCount="1">
                    <a-button block type="primary">
                      <upload-outlined />
                      选择文件
                    </a-button>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="24" :md="8">
                <a-form-item label="中期检查材料" name="midUrl">
                  <a-upload v-model:file-list="midFileList"
                    :customRequest="(options) => customRequest(options, 'midUrl')"
                    @change="(info) => handleFileChange(info, 'midUrl')" :maxCount="1">
                    <a-button block type="primary">
                      <upload-outlined />
                      选择文件
                    </a-button>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="24" :md="8">
                <a-form-item label="结项材料" name="closureUrl">
                  <a-upload v-model:file-list="closureFileList"
                    :customRequest="(options) => customRequest(options, 'closureUrl')"
                    @change="(info) => handleFileChange(info, 'closureUrl')" :maxCount="1">
                    <a-button block type="primary">
                      <upload-outlined />
                      选择文件
                    </a-button>
                  </a-upload>
                </a-form-item>
              </a-col>
            </a-row>
          </div>

          <div class="button-group">
            <a-space size="middle">
              <a-button size="large" @click="jump('/ss')">返回赛事</a-button>
              <a-button size="large" @click="resetForm">重置填写</a-button>
              <a-button type="primary" size="large" @click="onSubmit" :loading="loading">
                创建团队
              </a-button>
            </a-space>
          </div>

        </a-form>
      </a-col>
    </a-row>

    <a-modal v-model:open="memberModalVisible" title="批量添加团队成员" @ok="submitAddMembers" :confirm-loading="memberLoading"
      width="700px">
      <div class="batch-add-container">
        <!-- 左侧：团队选择和成员查询 -->
        <div class="search-section">
          <a-form layout="vertical" :model="memberForm">
            <a-form-item label="选择团队" name="teamId" :rules="[{ required: true, message: '请选择要添加成员的团队' }]">
              <a-select v-model:value="memberForm.teamId" style="width: 100%" placeholder="请选择要添加成员的团队"
                :loading="teamsLoading">
                <a-select-option v-for="team in userTeams" :key="team.id" :value="team.id">
                  {{ team.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="学号" name="studentNumber" :rules="[{ required: true, message: '请输入学号' }]">
              <a-input-search v-model:value="memberForm.studentNumber" placeholder="请输入学号" @search="searchStudentInfo"
                :loading="searchLoading" enter-button="查询" allow-clear />
            </a-form-item>

            <!-- 查询结果展示 -->
            <div class="student-info-card" v-if="memberForm.studentName">
              <div class="student-info">
                <div class="info-row">
                  <span class="label">姓名:</span>
                  <span class="value">{{ memberForm.studentName }}</span>
                </div>
                <div class="info-row">
                  <span class="label">学院:</span>
                  <span class="value">{{ memberForm.collegeName }}</span>
                </div>
                <div class="info-row">
                  <span class="label">专业:</span>
                  <span class="value">{{ memberForm.majorName }}</span>
                </div>
              </div>
              <a-button type="primary" size="small" @click="addToList" :disabled="isStudentAdded">
                {{ isStudentAdded ? '已添加' : '添加到列表' }}
              </a-button>
            </div>

            <div v-if="userNotFound" class="error-message">
              未找到该学号对应的学生信息，请检查学号是否正确
            </div>
          </a-form>
        </div>

        <!-- 右侧：已添加成员列表 -->
        <div class="members-list-section">
          <div class="section-header">
            <h3>已添加成员 ({{ selectedMembers.length }})</h3>
            <a-button type="link" @click="clearSelectedMembers" :disabled="selectedMembers.length === 0">
              清空列表
            </a-button>
          </div>

          <div class="empty-list" v-if="selectedMembers.length === 0">
            <a-empty description="暂无添加成员" />
          </div>

          <div class="members-list" v-else>
            <div v-for="(member, index) in selectedMembers" :key="index" class="member-item">
              <div class="member-info">
                <div class="member-name">{{ member.name }}</div>
                <div class="member-details">{{ member.collegeName }} · {{ member.majorName }}</div>
              </div>
              <a-button type="text" danger @click="removeFromList(index)">
                <template #icon><delete-outlined /></template>
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <div class="batch-info">
        <info-circle-outlined />
        <span>批量添加说明: 查询学生后点击"添加到列表"，可添加多名成员，完成后点击"确定"提交</span>
      </div>
    </a-modal>

  </div>
</template>

<script setup>
import { useUserStore } from "@/store/user";
import { SYSYTM_TITLE } from "@/config";
import { reactive, ref, toRaw } from "vue";
import { message, Modal } from "ant-design-vue";
import { UploadOutlined, DeleteOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
import ClassSelector from '@/components/ClassSelector.vue';
import TeacherSelector from '@/components/TeacherSelector.vue';
import CollegeSelector from '@/components/CollegeSelector.vue';
import {
  createTeam_api,
  uploadFile,
  addTeamMember,
  getUserInfoByNumber,
  getUserTeams,
  getTeacherList_api,
  getteachers
  // race_list
} from "@/apis";


const route = useRoute();
const userStore = useUserStore();
console.log("userStore.userInfo", userStore.userInfo?.id);
console.log("userStore.userInfo信息", userStore.userInfo);

useSeoMeta({
  title: "查询团队信息-" + SYSYTM_TITLE,
  description: SYSYTM_TITLE,
  keywords: "白云学院,创新创业网",
  robots: "index, follow",
  canonical: "https://example.com",
});


function jump(path) {
  let router = useRouter();
  router.push({ path: path, query: route.query });
}
const loading = ref(false);
const formRef = ref();

const formState = reactive({
  name: "", // 项目名称
  description: "", // 项目简介
  declarationUrl: "", // 申报书材料
  closureUrl: "", // 结项材料
  midUrl: "", // 中期检查材料
  leaderName: userStore.userInfo?.name || "", // 负责人姓名
  college: userStore.userInfo?.collegeName || "", // 负责人所在学院
  phone: userStore.userInfo?.phone || "", // 负责人手机号
  sClass: userStore.userInfo?.majorName || "", // 负责人班级
  teacher1: "", // 第一指导教师
  teacher1College: "", // 第一指导教师所在学院
  teacher2: "", // 第二指导教师
  teacher2College: "", // 第二指导教师所在学院
});


// 文件列表的响应式引用
const declarationFileList = ref([]);
const midFileList = ref([]);
const closureFileList = ref([]);


// 文件上传前的检查
const beforeUpload = (file) => {
  // 检查文件类型
  // const isAllowedType = file.type === 'application/pdf' ||
  //   file.type === 'application/msword' ||
  //   file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
  // if (!isAllowedType) {
  //   message.error('只能上传 PDF 或 Word 文件!');
  //   return false;
  // }

  // 检查文件大小
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('文件必须小于 10MB!');
    return false;
  }

  return true;
};

// 自定义上传请求
const customRequest = async ({ file, onSuccess, onError }, fieldName) => {
  try {
    // 先检查文件类型和大小
    if (!beforeUpload(file)) {
      onError(new Error('文件大小不符合要求'));
      return;
    }

    const formData = new FormData();
    formData.append('files', file);

    // 调用上传API
    const response = await uploadFile(formData);
    // console.log("文件上传响应:", response);

    if (response.code === 200) {
      onSuccess(response);
      formState.value[fieldName] = response.urls;
      message.success(`${file.name} 上传成功`);
    } else {
      onError(new Error(response.msg || '上传失败'));
      message.error(response.msg || '上传失败');
    }
  } catch (error) {
    console.error('文件上传出错:', error);
    onError(error);
    message.error('文件上传失败，请检查网络连接或联系管理员');
  }
};

// 统一的文件变化处理函数
const handleFileChange = (info, fieldName) => {
  const { file, fileList } = info;

  // 更新对应的文件列表
  switch (fieldName) {
    case 'declarationUrl':
      declarationFileList.value = fileList;
      break;
    case 'midUrl':
      midFileList.value = fileList;
      break;
    case 'closureUrl':
      closureFileList.value = fileList;
      break;
  }

  // 处理上传失败的情况
  if (file.status === 'error') {
    message.error(`${file.name} 上传失败`);
  }
};

const rules = {
  name: [
    {
      required: true,
      message: "请填写负责人姓名",
      trigger: "change",
    },
  ],
  college: [
    {
      required: true,
      message: "请填写负责人所在学院",
      trigger: "change",
    },
  ],
  sClass: [
    {
      required: true,
      message: "请填写班级",
      trigger: "change",
    },
  ],
  phone: [
    {
      required: true,
      message: "请填写手机号",
      trigger: "change",
    },
  ],
  description: [
    {
      required: true,
      message: "请填写项目简介",
      trigger: "change",
    },
  ],
  teacher1: [
    {
      required: true,
      message: "请选择第一指导教师",
      trigger: "change",
    },
  ],
  teacher1College: [
    {
      required: true,
      message: "请选择第一指导教师所在学院",
      trigger: "change",
    },
  ],
  teacher2: [
    {
      required: true,
      message: "请选择第二指导教师",
      trigger: "change",
    },
  ],
  teacher2College: [
    {
      required: true,
      message: "请选择第二指导教师所在学院",
      trigger: "change",
    },
  ],
};

// 增加一个响应式变量保存创建后的团队ID
const teamId = ref(null);
const userTeams = ref([]);

// 获取用户已创建的团队
const fetchUserTeams = async () => {
  try {
    if (!userStore.userInfo) {
      console.warn('用户未登录或用户信息未加载');
      message.warning('请先登录后再操作');
      return;
    }

    teamsLoading.value = true;
    const params = {
      userId: userStore.userInfo?.id,
    }
    const res = await getUserTeams(params);
    console.log("fetchUserTeams", res);

    if (res.code === 200 && res.rows && res.rows.length > 0) {
      userTeams.value = res.rows;
      // 如果有团队，设置第一个为当前团队
      teamId.value = res.rows[0].id;

      // 如果有多个团队，可以提示用户选择
      if (res.rows.length > 1) {
        showTeamSelector();
      } else {
        message.success(`已加载团队: ${res.rows[0].name}`);
      }
    } else {
      // console.log('用户暂无团队');
      userTeams.value = [];
    }
  } catch (error) {
    console.error('获取用户团队失败', error);
  } finally {
    teamsLoading.value = false;
  }
};

console.log("比赛id是", route.query.id)
// 修改提交表单函数
const onSubmit = () => {
  formRef.value.validate().then(() => {
    loading.value = true;
    const teamData = {
      name: formState.value.name,
      description: formState.value.description,
      declarationUrl: formState.value.declarationUrl,
      closureUrl: formState.value.closureUrl,
      midUrl: formState.value.midUrl,
      leaderName: userStore.userInfo?.name || "",
      college: userStore.userInfo?.collegeName || "",
      phone: userStore.userInfo?.phone || "",
      sClass: userStore.userInfo?.majorName || "",
      teacher1: formState.value.teacher1,
      teacher1College: formState.value.teacher1College,
      teacher2: formState.value.teacher2,
      teacher2College: formState.value.teacher2College,
    };

    createTeam_api(teamData, route.query.id)
      .then((res) => {
        console.log("res", res);
        loading.value = false;
        if (res.code === 200) {
          teamId.value = res.data.id;
          formState.value.id = res.data.id;
          message.success("创建团队成功");

          Modal.confirm({
            title: '创建成功',
            content: '是否立即添加团队成员？',
            okText: '添加成员',
            cancelText: '稍后再说',
            onOk() {
              addMember();
            }
          });
        } else {
          message.error(res.msg || "创建失败");
        }
      })
      .catch((error) => {
        loading.value = false;
        message.error("创建失败,请联系管理员");
        console.error(error);
      });
  });
};

const resetForm = () => {
  formState.value = {};
};
// 团队成员添加
const memberModalVisible = ref(false);
const memberLoading = ref(false);
const searchLoading = ref(false);
const userNotFound = ref(false);
const teamsLoading = ref(false); // 添加团队加载状态
const memberForm = reactive({
  teamId: null,       // 添加团队ID字段
  studentNumber: '',
  studentName: '',
  collegeName: '',
  majorName: '',
  reason: '',
  userId: '',        // 保留原有选择原因字段
  fullData: null    // 新增完整学生数据字段
});

// 新增已选择成员列表
const selectedMembers = ref([]);

// 计算当前查询的学生是否已添加到列表
const isStudentAdded = computed(() => {
  if (!memberForm.userId) return false;
  console.log("selectedMembers", selectedMembers.value);
  return selectedMembers.value.some(member => member.id === memberForm.userId);
});

// 搜索学生信息函数
const searchStudentInfo = async () => {
  if (!memberForm.studentNumber) {
    message.warning('请输入学号');
    return;
  }

  searchLoading.value = true;
  userNotFound.value = false;

  try {
    //根据学号查询学生信息
    const res = await getUserInfoByNumber(memberForm.studentNumber);
    // console.log("res", res.data);
    if (res.code === 200 && res.data) {
      memberForm.studentName = res.data.name;
      memberForm.userId = res.data.id;
      memberForm.collegeName = res.data.collegeName;
      memberForm.majorName = res.data.majorName;
      memberForm.fullData = res.data;
    } else {
      userNotFound.value = true;
      memberForm.studentName = '';
      memberForm.userId = '';
      memberForm.collegeName = '';
      memberForm.majorName = '';
      memberForm.fullData = null;
    }
  } catch (error) {
    console.error('查询学生信息失败', error);
    userNotFound.value = true;
  } finally {
    searchLoading.value = false;
  }
};

// 添加学生到列表
const addToList = () => {
  if (!memberForm.userId || !memberForm.studentName) {
    message.warning('请先查询有效的学生信息');
    return;
  }

  if (isStudentAdded.value) {
    message.info('该学生已在添加列表中');
    return;
  }

  // 直接添加完整的学生数据对象到选择列表
  const studentData = {
    ...memberForm.fullData,
    // 确保展示所需的关键字段存在
    name: memberForm.studentName,
    number: memberForm.studentNumber,
    reason: memberForm.reason || '团队邀请'
  };

  selectedMembers.value.push(studentData);

  message.success(`已添加 ${memberForm.studentName} 到列表`);

  // 清空当前查询，准备下一个
  memberForm.studentNumber = '';
  memberForm.studentName = '';
  memberForm.userId = null;
  memberForm.collegeName = '';
  memberForm.majorName = '';
  memberForm.reason = '';
  memberForm.fullData = null;
  userNotFound.value = false;
};

// 从列表中移除学生
const removeFromList = (index) => {
  const removedMember = selectedMembers.value[index];
  selectedMembers.value.splice(index, 1);
  message.success(`已从列表中移除 ${removedMember.name}`);
};

// 清空已选列表
const clearSelectedMembers = () => {
  if (selectedMembers.value.length === 0) return;

  Modal.confirm({
    title: '确认清空',
    content: '确定要清空所有已添加的成员吗？',
    okText: '确定',
    cancelText: '取消',
    onOk() {
      selectedMembers.value = [];
      message.success('已清空添加列表');
    }
  });
};

// 修改为批量提交成员
const submitAddMembers = async () => {
  // 检查团队选择
  if (!memberForm.teamId) {
    message.warning('请选择要添加成员的团队');
    return;
  }

  // 检查是否有成员要添加
  if (selectedMembers.value.length === 0) {
    message.warning('请至少添加一名成员');
    return;
  }

  memberLoading.value = true;

  try {
    // 准备请求参数，包含所有已选成员
    const params = {
      teamId: memberForm.teamId,
      userInfoVoList: selectedMembers.value
    };

    // console.log("批量添加成员参数:", params);

    const res = await addTeamMember(params);

    if (res.code === 200) {
      const teamName = userTeams.value.find(t => t.id === memberForm.teamId)?.name || '当前团队';
      message.success(`已成功邀请 ${selectedMembers.value.length} 名成员加入 ${teamName}`);
      memberModalVisible.value = false;

      // 重置表单和已选列表
      resetMemberForm();
      selectedMembers.value = [];
    } else {
      message.error(res.msg || '添加成员失败，请检查是否有成员已在团队中');
    }
  } catch (error) {
    console.error('添加成员失败', error);
    message.error('添加成员失败，请稍后重试');
  } finally {
    memberLoading.value = false;
  }
};

// 修改重置函数，保留团队ID
const resetMemberForm = () => {
  // 保留团队ID，方便连续添加成员
  const teamId = memberForm.teamId;

  memberForm.studentNumber = '';
  memberForm.studentName = '';
  memberForm.userId = null;
  memberForm.collegeName = '';
  memberForm.majorName = '';
  memberForm.reason = '';
  memberForm.fullData = null;

  // 恢复之前选择的团队ID
  memberForm.teamId = teamId;

  userNotFound.value = false;
};

function addMember() {
  // 先获取用户的团队列表
  fetchUserTeams().then(() => {
    if (userTeams.value.length === 0) {
      Modal.confirm({
        title: '您尚未创建团队',
        content: '添加成员前需要先创建一个团队，是否现在创建团队？',
        okText: '创建团队',
        cancelText: '取消',
        onOk: () => {
          // 进入创建团队流程
          formRef.value?.scrollIntoView({ behavior: 'smooth' });
        }
      });
      return;
    }

    // 打开模态框
    memberModalVisible.value = true;
  });
}



//储存老师信息
const teacherList = ref([]);
const fetchTeacher = async () => {
  const res = await getteachers(userStore.userInfo.isTeacher);
  if (res.code == 200) {
    teacherList.value = res.data;
    console.log("老师列表为：", teacherList.value);
  }
}

const handleTeacherChange = (value) => {
  const selectedTeacher = teacherList.value.find((teacher) => teacher.name === value);
  if (selectedTeacher) {
    console.log("选中的老师信息", selectedTeacher);
  }
};

const filteredTeacherList = ref([]); // 筛选后的教师列表
const handleTeacherSearch = (value) => {
  if (!value) {
    filteredTeacherList.value = teacherList.value;
  } else {
    filteredTeacherList.value = teacherList.value.filter((teacher) =>
      teacher.name.includes(value)
    );
  }
};



onMounted(() => {
  // 如果用户已登录，获取团队信息
  if (userStore.userInfo?.id) {
    fetchUserTeams();
  }
  fetchTeacher();
})
</script>

<style lang="less" scoped>
.content {
  min-height: 90vh;
  padding: 0 15px;
}

// .title {
//   font-size: 22px;
//   font-weight: 600;
//   margin: 20px 0;
//   text-align: center;
// }

.title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.title {
  font-size: 22px;
  font-weight: 600;
  text-align: left;
  margin-left: 40%;
}

:deep(.ant-btn) {
  height: 40px;
}

:deep(.ant-form-item) {
  @media (max-width: 767px) {
    margin-bottom: 16px;

    .ant-form-item-label {
      padding: 0 0 12px;

      label {
        height: 24px;
        line-height: 24px;
        font-size: 16px;

      }
    }


  }

  @media (min-width: 768px) {
    .ant-form-item-label {
      label {
        height: 32px;
        line-height: 32px;
      }
    }
  }

}

.upload-section {
  padding: 20px;
  background-color: #fafafa;

  .section-title {
    font-size: 18px;
    margin-bottom: 24px;
    color: #1f1f1f;
  }

  :deep(.ant-form-item) {
    .ant-upload {
      width: 100%;
    }

    .ant-btn {
      height: 40px;
    }
  }

}

.button-group {
  margin: 20px 0;
  text-align: center;
}

.error-message {
  color: #ff4d4f;
  margin-top: 8px;
}

/* 批量添加模态框样式 */
.batch-add-container {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;

  .search-section {
    flex: 1;
    border-right: 1px solid #f0f0f0;
    padding-right: 20px;
  }

  .members-list-section {
    flex: 1;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h3 {
        margin: 0;
        font-size: 16px;
      }
    }

    .members-list {
      max-height: 300px;
      overflow-y: auto;

      .member-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .member-info {
          .member-name {
            font-weight: 500;
          }

          .member-details {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }

  .student-info-card {
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 12px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .student-info {
      .info-row {
        margin-bottom: 4px;

        .label {
          font-weight: 500;
          margin-right: 8px;
        }
      }
    }
  }
}

.batch-info {
  background-color: #f9f9f9;
  padding: 8px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #666;

  .anticon {
    color: #1890ff;
  }
}

.empty-list {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value {
  font-size: 17px;
}

:deep(.ant-form-item) {
  @media (max-width: 767px) {
    margin-bottom: 16px;

    .ant-form-item-label {
      padding: 0 0 12px;

      label {
        height: 24px;
        line-height: 24px;
        font-size: 17px;
      }
    }
  }

  @media (min-width: 768px) {
    .ant-form-item-label {
      label {
        height: 32px;
        line-height: 32px;
        font-size: 17px;
      }
    }
  }
}
</style>